<!-- name 属性用于给组件指定一个名称 -->
<script setup lang="ts" name="ToRefs">
// 总结 toRefs 就是把一个对象中的所有key ： value 全部解构出来并转换为响应式对象
// toRef 是 解构对象中的单个 key ： value
/* reactive 创建了一个响应式的对象。
toRefs 可以从响应式对象中解构出多个响应式的 ref。
toRef 可以从响应式对象中解构出单个响应式的 ref。
解构赋值是一种简化语法，可以方便地从对象中获取值。 */

//toRef 的工作原理
//当使用 toRef 时，Vue 3 会创建一个新的 ref 对象，该对象持有原始响应式对象中的某个属性的值。
//这个 ref 对象实际上是一个包装器，它包含了一个 .value 属性，该属性指向原始对象中的属性值。
//当修改 ref 对象的 .value 时，Vue 3 会更新原始响应式对象中的属性值，以保持两者之间的同步。

/* 当使用 toRef 或 toRefs 从一个响应式对象中提取属性时
Vue 3 会创建一种特殊的映射关系，使得这些属性与原始对象中的属性保持同步
这种映射关系是通过内部的代理 proxy 机制实现的，这样即使修改了从对象中提取出来的 ref 对象
原始对象中的相应属性也会得到更新。 */
import { reactive,toRef,toRefs } from 'vue';

//数据
let person = reactive({
    name: '张三',
    age: 18
})

// 解构赋值 ： let {name, age} = person 如果这么写，name 和 age 都不是响应式的
//应该引入 toRefs 把 person 包裹一下 ， 这样 name 和 age 就是 响应式的了 同时也应该.value
let {name, age} = toRefs(person)
//toRef用法
let nianLing = toRef(person, 'age')
console.log(nianLing, nianLing.value);
//注意 此时就算只更改 nianling ， person 中的 age 也会发生改变


//方法
function changeName() {
    name.value += '~'
    console.log('name: ' + name.value, 'person.name: ' + person.name)
}

function changeAge() {
    age.value += 1
    console.log('age: ' + age.value, 'person.age: ' + person.age)
}

</script>

<template>
  <div class="person">
    <h1>
        姓名：{{ name }}
        <br>
        年龄：{{ age }}
        <br>
        <button @click="changeName()">修改姓名</button>
        <button @click="changeAge()">修改年龄</button>
  </h1>
  </div>
</template>

<style>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 20px;
  padding: 20px;
}
</style>
